<template>
  <div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/project">项目</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/curriculum">课程</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue';
import {Tabbar, TabbarItem} from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
name: "Footer",
  data(){
    return {
      active: this.$store.state.routerAction,
    }
  },
  methods:{
    onChange(index) {
      this.$store.commit('changeFooterRouterActionStatus',index)
    },
  },
}
</script>

<style scoped>

</style>